<template>
     <div class="x-nocdetail" @click.self="closeMask" :style="{height:`${deviceH}px`}">
        <div class="nocdetail-ctx" :style="{'background-image':`url(${modelBg})`}">
            <div class="ctx-title">疫情防控管理</div>
            <div class="ctx-info">
                <div class="info-item">
                    <div class="item-label">姓名</div>
                    <div class="item-val">{{info.name}}</div>
                </div>
               <div class="info-item">
                    <div class="item-label">户籍</div>
                    <div class="item-val">{{info.register}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">性别</div>
                    <div class="item-val">{{info.sex}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">来自地区</div>
                    <div class="item-val">{{info.fromAddress}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">交通方式</div>
                    <div class="item-val">{{info.tranType}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">途径地点</div>
                    <div class="item-val">{{info.pathAddress}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">车次/车牌</div>
                    <div class="item-val">{{info.carNum}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">到达时间</div>
                    <div class="item-val">{{info.arriveTime | filterTime}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">来锡事宜</div>
                    <div class="item-val">{{info.metters}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">是否发热</div>
                    <div class="item-val">{{info.isHot}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">居住地址</div>
                    <div class="item-val">{{info.address}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">小区名称</div>
                    <div class="item-val">{{info.commName}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">楼栋号</div>
                    <div class="item-val">{{info.uniteNum}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">房间号</div>
                    <div class="item-val">{{info.roomNum}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">身份证号</div>
                    <div class="item-val">{{info.idNum}}</div>
                </div>
                <div class="info-item">
                    <div class="item-label">联系电话</div>
                    <div class="item-val">{{info.phone}}</div>
                </div>
                 <div class="info-item">
                    <div class="item-label">紧急联系人</div>
                    <div class="item-val">{{info.quickPersonName}}</div>
                </div>
                 <div class="info-item">
                    <div class="item-label">紧急联系人电话</div>
                    <div class="item-val">{{info.quickPersonPhone}}</div>
                </div>
                 <div class="info-item">
                    <div class="item-label">工作单位</div>
                    <div class="item-val">{{info.workUnit}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">职务</div>
                    <div class="item-val">{{info.workName}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">年龄</div>
                    <div class="item-val">{{info.age}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">学习</div>
                    <div class="item-val">{{info.education}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">婚姻</div>
                    <div class="item-val">{{info.marry}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">民族</div>
                    <div class="item-val">{{info.nation}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">身高</div>
                    <div class="item-val">{{info.heigh}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">居住类型</div>
                    <div class="item-val">{{info.ueage}}</div>
                </div>
                  <div class="info-item">
                    <div class="item-label">备注</div>
                    <div class="item-val">{{info.remark}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {GetEpidemicInfoDetail} from '@/api/peopleApi'
export default {
    name:"xnocdetail",
    props:{
        id:{
            type:[Number,String]
        }
    },
    data(){
        return{
             modelBg:require('@/assets/images/modelBg.png'),
            deviceH:0,
            id:"",
            info:{}
        }
    },
    beforeMount(){
       let h = document.documentElement.clientHeight || document.body.clientHeight;
        this.deviceH = h
    },
    mounted(){
        this.GetPeopleDetail()
    },


    methods:{
        //关闭
        closeMask(){
            this.$emit("closeMask")
        },
        async GetPeopleDetail(){
            try {
                this.info = await GetEpidemicInfoDetail(this.id)

            } catch (error) {
                this.$message({
                    type:"error",
                    message:error
                })
            }
        }

    }
}
</script>
<style lang="less" scoped>
.x-nocdetail{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.8);
    z-index: 1000;
    .nocdetail-ctx{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 1177px;
        height: 800px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: center;
        padding: 10px 30px;
        box-sizing: border-box;
        .ctx-title{
            width: 100%;
            padding-top: 35px;
            box-sizing: border-box;
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #E9E9E9;
            letter-spacing: 4.8px;
            text-align: center;
            box-sizing: border-box;
        }
        .ctx-info{
            width: 90%;
            margin: 20px auto 0 auto;
            height: 672px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-flow: wrap;
            .info-item{
                width: 50%;
                height: 48px;
                border-bottom: 2px solid transparent;
                box-sizing: border-box;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .item-label{
                    width: 50%;
                    line-height: 46px;
                    height: 100%;
                    background: rgb(6,18,29);
                    padding-left: 30px;
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #FFFFFF;
                    box-sizing: border-box;
                    text-align: left;
                }
                .item-val{
                    width: 50%;
                    height: 100%;
                    line-height: 46px;
                    background: transparent;
                     padding-left: 30px;
                    font-family: PingFangSC-Regular;
                    font-size: 14px;
                    color: #FFFFFF;
                    box-sizing: border-box;
                    text-align: left;
                }
            }
        }
    }
}
</style>

